<!DOCTYPE html>
<html lang="zh-CN" xmlns="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食物管理系统</title>
    <!-- 引入 ElementUI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue 和 ElementUI -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <style>
        body {
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #fff;
        }
        .header {
            margin-bottom: 20px;
        }
        .header h1 {
            color: #303133;
            font-size: 24px;
            margin: 0;
        }
        .filter-container {
            display: flex;
            margin-bottom: 20px;
        }
        .filter-item {
            margin-right: 10px;
        }
        .pagination-container {
            margin-top: 20px;
            text-align: right;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 头部标题 -->
    <div class="header">
        <h1>食物管理</h1>
    </div>

    <!-- 搜索区域 -->
    <div class="filter-container">
        <el-input
                v-model="queryParams.name"
                placeholder="食物名称"
                class="filter-item"
                style="width: 200px;">
        </el-input>
        <el-button class="filter-item" type="primary" @click="handleQuery">查询</el-button>
        <el-button class="filter-item" type="primary" @click="handleCreate">新建</el-button>
    </div>

    <!-- 食物表格 -->
    <el-table
            :data="tableData"
            border
            stripe
            style="width: 100%"
            size="small">

        <el-table-column
                type="index"
                label="序号"
                width="80"
                align="center">
        </el-table-column>

        <el-table-column
                prop="type"
                label="食物类别"
                align="center">
        </el-table-column>

        <el-table-column
                prop="name"
                label="食物名称"
                align="center">
        </el-table-column>

        <el-table-column
                prop="description"
                label="描述"
                align="center">
        </el-table-column>

        <el-table-column
                label="操作"
                align="center"
                width="180">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="primary"
                        @click="handleEdit(scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total">
        </el-pagination>
    </div>
    <div class="add-form">
        <el-dialog
                title="新增图书"
                :visible.sync="dialogFormVisible">

            <el-form
                    ref="dataAddForm"
                    :model="formData"
                    :rules="rules"
                    label-position="right"
                    label-width="auto">

                <el-row>
                    <el-col :span="12">
                        <el-form-item
                                label="食物类别"
                                prop="type">
                            <el-input v-model="formData.type"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item
                                label="食物名称"
                                prop="name">
                            <el-input v-model="formData.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                                label="食物描述"
                                prop="description">
                            <el-input v-model="formData.description"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="saveFood()">保存</el-button>
            </div>
        </el-dialog>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                queryParams: {
                    name: ''
                },
                tableData: [],
                pagination: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 3
                },
                dialogFormVisible: false,
                formData: {
                    type: '',
                    name: '',
                    description: ''
                },
                rules: {
                    type: [{ required: true, message: '请输入食物类别', trigger: 'blur' }],
                    name: [{ required: true, message: '请输入食物名称', trigger: 'blur' }],
                    description: [{ required: true, message: '请输入食物描述', trigger: 'blur' }]
                }
            }
        },
        mounted() {
            this.getAll();// 页面加载时调用 getAll 获取数据
        },
        methods: {
            saveFood(food){
                axios.post('http://localhost:8080/food',this.formData).then((res)=>{
                    this.tableData=res.data
                })

            },
            getAll(){
                axios.get('http://localhost:8080/food').then((res)=>{
                    this.tableData = res.data

                })
            },

            handleQuery() {
                console.log('查询条件:', this.queryParams);
                this.pagination.currentPage = 1;
                this.getAll();
                // 这里应该发送请求获取数据
            },
            handleCreate() {
                console.log('新建图书');
                // 打开新建对话框
            },
            handleEdit(row) {
                console.log('编辑图书:', row);
                // 打开编辑对话框
            },
            handleDelete(row) {
                this.$confirm('确认删除该图书吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log('删除图书:', row);
                    // 发送删除请求
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pagination.pageSize = val;
                this.getAll();
                // 重新获取数据
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pagination.currentPage = val;
                this.getAll();
                // 重新获取数据
            }
        }
    });
</script>
</body>
</html>